import React, { useState, useEffect } from 'react';
import { Breadcrumb, Skeleton } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import FooterToolbar from '@/components/FooterToolbar';
import CommonPagination from '@/components/CommonPagination';
import { getTableListOp } from '../../service';
import styles from './index.module.less';

const initPagination = {
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChange: false,
  showQuickJumper: false,
}//初始化分页

const ProdList = ({ handleSetType }) => {

  const [data, setData] = useState([]);
  const [pagination, setPage] = useState(false);

  useEffect(()=>{
    setPage({
      ...(pagination || initPagination),
      current: 1
    })
  }, [])

  useEffect(() => {
    if (pagination) {
      setData([]);
      getTableListFunc();
    }
  }, [pagination])

  const getTableListFunc = async () => {
    const { data, success } = await getTableListOp({
      current: pagination.current,
      size: pagination.pageSize,
      status: 1
    });
    if(success){
      const { records = [], total } = data || {};
      pagination.total = total;
      setPage(pagination);
      setData(records)
    }
  }

  //分页区
  const pageProps = {
    pagination,
    handleChange(current, size) {
      setPage({
        ...pagination,
        current: (current == pagination.current) ? 1 : current,
        pageSize: size
      })
    },
  }

  return (<>
    <Breadcrumb>
      <Breadcrumb.Item key='1' onClick={()=>handleSetType('')} style={{cursor:'pointer'}}>
        <HomeOutlined />
      </Breadcrumb.Item>
      <Breadcrumb.Item key='2'>产品更新</Breadcrumb.Item>
    </Breadcrumb>
    <br />
    {
      data.length ? data.map(item=>{
        return <div className={styles.articleItem} key={item.id}>
          <div className="articleTitle"><span className="text-overflow" onClick={()=>handleSetType(item.id)} title={item.title}>{item.title}</span></div>
          <div className="articleDesc">
            <div className="subTitle text-overflow">{item.subTitle}</div>
            <div className="createtime">{item.createTime}</div>
          </div>
        </div>
      }) : [1,2,3,4,5,6,7,8].map(item=>{
        return <div className={styles.articleItem} key={item}>
        <div className="articleTitle"><Skeleton.Input active size='small' /></div>
        <div className="articleDesc">
          <div className="subTitle"><Skeleton.Input active size='small' /></div>
          <div className="createtime"><Skeleton.Button active size='small' shape="round"/></div>
        </div>
      </div>
      })
    }
    <FooterToolbar>
      <CommonPagination {...pageProps} />
    </FooterToolbar>
  </>)

}

export default React.memo(ProdList, (prev, next)=>{
  return prev.updateKey == next.updateKey;
})